<template>
	<div class="notice" v-show="isShow">
		<b-container>
			<b-row class="inner" @click="toHref">
				<div class="content">
					<span class="laba"><img src="../images/laba.png"></span>
					<span class="text">【{{$t('home.notice.name')}}】<span>{{info.totalElements > 0 ? info.dataList[0].title : '' }}</span></span>
					<span class="arrow">{{$t('home.notice.detail')}} >></span>
				</div>
			</b-row>
		</b-container>
	</div>
</template>

<script>
import { GetLists } from '@/api'
import { filterLocaleType } from '@/utils'
export default {
	name: 'notice',
  	data () {
		return {
			lanType: 2,
			info: {},
			isShow: false
		}
	},
	mounted(){
		this.lanType = filterLocaleType(this.$i18n.locale)
		this.fetchData()
	},
	watch:{
		'$i18n.locale'(n, o) {
			this.lanType = filterLocaleType(n)
			this.fetchData()
		}
	},
	methods:{
		fetchData(){
			GetLists({
				categoryId: 5,
				lanType: this.lanType,
				page:1,
				size:1
			}).then((res)=>{
				this.info = res
				if (res.totalElements > 0) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			})
		},
		toHref(){
			this.$router.push({
				path:'/news',
				query:{
					id: 3
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.notice{
	position: absolute;
	z-index: 10;
	width: 100%;
	top: 10%;
	cursor: pointer;
	.inner{
		height: 35px;
		line-height: 35px;
		color: rgba(255,255,255,0.8);
		.content{
			width:100%;
			margin:0 15px;
			padding:0 15px;
			background: rgba(255,255,255,0.2);
			display:flex;
			.laba{
				width: 22px;
				height: 35px;
				position: relative;
			}
			.text{
				flex:1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>